import Heading from "@/components/common/heading"
import Icon from "@/components/common/icon"
import Image from "@/components/common/image"
import Link from "@/components/common/link"
import { Slider, SliderBar, SliderMain } from "@/components/common/slider"
import MyButton from "@/components/form/my-button"
import Block from "@/components/layout/block"
import Floor from "@/components/layout/floor"
import Wrapper from "@/components/layout/wrapper"
import { getAuthorDetailUrl } from "@/utils/build-url/news"
import { formatWithThousandsSeparator } from "@/utils/format/number"
import { AiOutlinePlus } from "react-icons/ai"
import { getArticleList } from "../../action"


const page = async () => {
  const articleList = await getArticleList()
  return (
    <>
      <Floor>
        <Wrapper>
          <Slider>
            <SliderMain>
              <Block>
                <div className="overflow-hidden rounded-card-rounded md:rounded-card-rounded-md bg-white">
                  {/* 封面图 */}
                  <Image src="https://picsum.photos/1000/600" alt="" />
                  <div className="py-card-gap-y md:py-card-gap-y-md px-card-gap-x md:px-card-gap-x-md">
                    <div>44</div>
                    <div>44</div>
                    <div>44</div>
                    <div>44</div>
                    <div>44</div>
                    <div>44</div>
                    <div>44</div>
                    <div>44</div>
                    <div>44</div>
                  </div>
                </div>
              </Block>
              {/* <Block>评论</Block>
              <Block>
                <Heading>相关推荐</Heading>
                  <Block>
                    <Heading>
                      本日更新
                    </Heading>
                    <CardList>
                      {articleList.map((item) => (
                        <ArticleCard key={item.id} obj={item} />
                      ))}
                    </CardList>
                  </Block>
              </Block> */}
            </SliderMain>
            <SliderBar>
              <Block>
                <div className="flex flex-col items-center text-center gap-content-gap-y md:gap-content-gap-y-md overflow-hidden rounded-card-rounded md:rounded-card-rounded-md bg-white py-card-p-2y md:py-card-p-2y-md px-card-p-x md:px-card-p-x-md">
                  <Image className="w-[60px]! h-[60px] rounded-full" src="https://picsum.photos/60/60" alt="" />
                  <div className="space-y-txt-gap-y md:space-y-txt-gap-y-md">
                    <strong className="block">
                      <Link className="hover:text-primary" href={getAuthorDetailUrl({
                        language: "zh",
                        author: "david",
                      })}>David 暇满火</Link>
                    </strong>
                    <p>专注新能源汽车领域报道 5 年</p>
                  </div>
                  <ul className="flex gap-content-gap-x md:gap-content-gap-x-md">
                    <li className="flex flex-col gap-txt-gap-y md:gap-x-txt-gap-y-md">
                      <strong>{formatWithThousandsSeparator(42)}</strong>
                      <span className="tip">文章</span>
                    </li>

                    <li className="flex flex-col gap-txt-gap-y md:gap-x-txt-gap-y-md">
                      <strong>{formatWithThousandsSeparator(45866)}</strong>
                      <span className="tip">点赞</span>
                    </li>

                    <li className="flex flex-col gap-txt-gap-y md:gap-x-txt-gap-y-md">
                      <strong>{formatWithThousandsSeparator(55884)}</strong>
                      <span className="tip">订阅</span>
                    </li>
                  </ul>
                  <MyButton><Icon icon={AiOutlinePlus} /> 订阅作者</MyButton>
                </div>
              </Block>

              {/* <Block>
                <div className="bg-white py-card-p-y md:py-card-p-y-md px-card-p-x md:px-card-p-x-md rounded-card-rounded md:rounded-card-rounded-md">
                  <Heading>热门标签</Heading>
                  <ul className="flex flex-wrap gap-txt-x md:gap-x-txt-gap-x-md gap-y-txt-y md:gap-y-txt-gap-y-md">
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">特斯拉</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">Model Y</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">莫斯科</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">迪拜</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">Audi</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">BBA</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">BMW</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">出海项目</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">特斯拉</li>
                    <li className="rounded-full bg-bg-gray px-4 py-2 tip text-black!">特斯拉</li>
                  </ul>
                </div>
              </Block> */}
            </SliderBar>
          </Slider>
        </Wrapper>
      </Floor>
    </>
  )
}

export default page